<template>
  <div id="app" :class="themeDark ? 'theme_dark wraper' : 'wraper'">
    <Header ref="header" @changeTheme="themeDark = !themeDark" />
    <router-view :style="{'min-height': pageMinHeight + 'px'}" />
    <div></div>
    <Footer ref="footer" />
    <UserLogin />

    <!-- 回到顶部 -->
    <div class="fixed-sidebar">
      <div class="fixed-scroll-top">
        <i class="el-icon-top" @click="scrollTop"></i>
      </div>
    </div>
  </div>
</template>

<script>
import Header from './views/common/Header.vue'
import Footer from './views/common/Footer.vue'
import UserLogin from '@/views/components/UserLogin'
export default {
  components: {
    Footer,
    Header,
    UserLogin,
  },
  data() {
    return {
      themeDark: false,
      user: {},
      curHeight: 0,
      pageMinHeight: 400
    }
  },
  created() {
    // this.$bus.on('getUser', this.getUser)
    // this.$bus.on('saveUser', this.saveUser)
    // console.log(process.env.NODE_ENV)
    this.getUser()
  },
  mounted() {
    // 记录访问人员
    this.$api.httpLogIP()

    // 获取屏幕高度

    let windowHeight = document.documentElement.clientHeight || document.body.clientHeight,
    headerHeight = this.$refs.header.$el.clientHeight,
    footerHeight = this.$refs.footer.$el.clientHeight

    let pageMinHeight = windowHeight - headerHeight - footerHeight
    this.pageMinHeight = pageMinHeight

    // console.log(windowHeight,headerHeight,footerHeight)
    // console.log(pageMinHeight)

  },
  methods: {
    // 获取用户信息
    async getUser() {
      const token = this.$storage.getSession('token')

      if (token) {
        const res = await this.$api.httpLoginToken(token)
        const { code, data } = res
        if (code == 200) {
          this.user = data.user
          this.$store.commit('login', this.user)

          /* this.user.userId = res.data.user.userId
          this.user.name = res.data.user.name
          this.user.email = res.data.user.email
          this.user.admin = res.data.user.admin */

          /* this.$store.commit('login', {
            userId: res.data.user.userId,
            name: res.data.user.name,
            email: res.data.user.email,
            admin: res.data.user.admin,
          }) */

        }
      }
    },
    // 保存用户信息
    // saveUser(user) {
    // this.$store.state.user = user
    // this.$storage.setSession('token', user)
    // this.isLogin = true
    // },
    // 回到顶部
    scrollTop() {
      let timer;
      cancelAnimationFrame(timer)
      timer = requestAnimationFrame(function fn() {
        const oTop =
          document.body.scrollTop || document.documentElement.scrollTop
        if (oTop > 0) {
          document.body.scrollTop = document.documentElement.scrollTop =
            oTop - 800
          timer = requestAnimationFrame(fn)
        } else {
          cancelAnimationFrame(timer)
        }
      })
    },
  },
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  width: 100%;
  height: 100%;
  // padding: 0 10px;
  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei',
    arial, STHeiTi, sans-serif;

  background-color: $white;

  &.theme_dark {
    filter: invert(1) hue-rotate(180deg);

    img {
      filter: invert(1) hue-rotate(180deg);
    }
  }
}

.fixed-sidebar {
  cursor: pointer;
  position: fixed;
  bottom: 32px;
  right: 32px;
}

@media screen and (max-width: 1200px) {
  #app {
    padding: 0 4px;
  }

  .el-message-box {
    width: 360px !important;
  }
}
</style>
